<template>
  <div class="video-window" @mouseenter="showControls" @mouseleave="hideControlsAfterDelay">
    <video ref="videoStream" autoplay/>
    <div class="video-controls" :class="{ 'controls-visible': showControlsFlag }">
      <!-- 音频开关按钮 -->
      <div
          class="control-btn"
          :style="{ backgroundColor: isAudioEnabled ? 'rgba(255, 0, 0, 0.3)' : 'rgba(34, 34, 34, 0.3)' }"
          @click="toggleAudio"
      >
        <font-awesome-icon
            :icon="['fas', 'microphone']"
            :style="{ color: isAudioEnabled ? 'red' : '#222' }"
        />
      </div>
      <!-- 视频开关按钮 -->
      <div
          class="control-btn"
          :style="{ backgroundColor: isVideoEnabled ? 'rgba(255, 0, 0, 0.3)' : 'rgba(34, 34, 34, 0.3)' }"
          @click="toggleVideo"
      >
        <font-awesome-icon
            :icon="['fas', 'video']"
            :style="{ color: isVideoEnabled ? 'red' : '#222' }"
        />
      </div>
      <!-- 屏幕共享开关按钮 -->
      <div
          class="control-btn"
          :style="{ backgroundColor: isScreenSharing ? 'rgba(255, 0, 0, 0.3)' : 'rgba(34, 34, 34, 0.3)' }"
          @click="toggleScreenShare"
      >
        <font-awesome-icon
            :icon="['fas', 'desktop']"
            :style="{ color: isScreenSharing ? 'red' : '#222' }"
        />
      </div>

      <!-- 录制开关按钮 -->
      <!--      <div-->
      <!--          class="control-btn"-->
      <!--          :style="{ backgroundColor: isRecording ? 'rgba(255, 0, 0, 0.3)' : 'rgba(34, 34, 34, 0.3)' }"-->
      <!--          @click="toggleRecord"-->
      <!--      >-->
      <!--        <font-awesome-icon-->
      <!--            :icon="['fas', 'record-vinyl']"-->
      <!--            :style="{ color: isRecording ? 'red' : '#222' }"-->
      <!--        />-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>

import {setAudioStream, setVideoStream} from "@/utils/stream";

export default {
  name: 'LocalWindow',
  inject: ['localStream'],
  data() {
    return {
      isAudioEnabled: true,
      isVideoEnabled: true,
      isScreenSharing: false,

      showControlsFlag: false,
      hideTimer: null,
      currentStream: new MediaStream(),
    };
  },
  mounted() {
    if (this.localStream.using === 'camera') {
      this.$refs.videoStream.srcObject = this.localStream.cameraStream;
      this.currentStream = this.localStream.cameraStream;
    } else if (this.localStream.using === 'screen') {
      this.$refs.videoStream.srcObject = this.localStream.screenStream;
      this.currentStream = this.localStream.screenStream;
    }
  },
  watch: {
    'localStream.using'(newVal) {
      if (newVal === 'camera') {
        this.$refs.videoStream.srcObject = this.localStream.cameraStream;
        this.currentStream = this.localStream.cameraStream;
      } else if (newVal === 'screen') {
        this.$refs.videoStream.srcObject = this.localStream.screenStream;
        this.currentStream = this.localStream.screenStream;
      }
    }
  },
  methods: {
    hangup(){

    },
    setCameraVideoStream(deviceId) {
      if (deviceId) {
        setVideoStream(this.localStream.cameraStream, deviceId);
        if (this.localStream.using === 'camera') {
          this.$refs.videoStream.srcObject = this.localStream.cameraStream;
          this.currentStream = this.localStream.cameraStream;
        }
      }
    },
    setCameraAudioStream(deviceId) {
      if (deviceId) {
        setAudioStream(this.localStream.cameraStream, deviceId);
        if (this.localStream.using === 'camera') {
          this.$refs.videoStream.srcObject = this.localStream.cameraStream;
          this.currentStream = this.localStream.cameraStream;
        }
      }
    },
    // 切换音频开关
    toggleAudio() {
      this.isAudioEnabled = !this.isAudioEnabled;
      this.localStream.cameraStream.getAudioTracks().forEach(track => {
        track.enabled = this.isAudioEnabled;
      });
    },
    // 切换视频开关
    toggleVideo() {
      this.isVideoEnabled = !this.isVideoEnabled;
      this.localStream.cameraStream.getVideoTracks().forEach(track => {
        track.enabled = this.isVideoEnabled;
      });
    },
    // 切换屏幕共享开关
    async toggleScreenShare() {
      if (this.isScreenSharing) {
        if (this.localStream.screenStream) {
          this.localStream.screenStream.getTracks().forEach(track => track.stop());
          // this.localStream.screenStream = null;
        }
      } else {
        // 开始屏幕共享
        try {
          this.localStream.screenStream = await navigator.mediaDevices.getDisplayMedia({video: true, audio: true});
        } catch (error) {
          console.error('屏幕共享失败:', error);
          return;
        }
      }
      this.isScreenSharing = !this.isScreenSharing;
      this.localStream.using = this.isScreenSharing ? 'screen' : 'camera';
    },
    // async toggleRecord(){
    //   if (this.isRecording){
    //     // 关闭录制,下载录制文件
    //     this.$message.info('生成录制文件中,请稍等片刻')
    //     await this.recorder.stop();
    //   }else {
    //     this.recorder.setStream(this.currentStream.clone());
    //     this.recorder.start();
    //   }
    //   this.isRecording = !this.isRecording;
    // },
    // 显示控件组
    showControls() {
      clearTimeout(this.hideTimer);
      this.showControlsFlag = true;
    },
    // 2s 后隐藏控件组
    hideControlsAfterDelay() {
      this.hideTimer = setTimeout(() => {
        this.showControlsFlag = false;
      }, 1000);
    }
  }
};
</script>

<style scoped>
.video-window {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
}

video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.video-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.controls-visible {
  opacity: 1;
  visibility: visible;
}

.control-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color 0.3s;
}

.control-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}


</style>